<template>
	<view class="box">
		<view style="background-color: #FFFFFF;width: 750rpx; padding:  12rpx;">
			<u-tabs :list="list1" @click="click" :itemStyle="{height:'80rpx',width:'140rpx', backgroundColor: '#ffffff' }"></u-tabs>
		</view>

		<!-- 具体活动类容 -->
		<view class="box-bottom">
			<view class="active-box">
				<u-empty v-if="actList.length == 0" mode="list" :icon="getimageBaseUrl('bgMsg.jpg')">
				</u-empty>
				<view class="active-box-item" v-for="item in actList" :key="item.id" @click="toActivityDetail(item.id)">
					<image class="img" :src="item.imageSrc===null||item.imageSrc===''?getimageBaseUrl('bgMsg.jpg'):item.imageSrc" mode=""></image>
					<view class="content">		
						<view class="actTitle">
							{{item.title }}
						</view>
						<view class="time">
							{{item.startTime | timeFilters}}-{{item.endTime | timeFilters}}
						</view>
						<view class="address">
							{{item.address}}
						</view>
					</view>
					<view v-if ="getTaskStatus(item.startTime,item.endTime) === 1" class="status">
							待开始
					</view>
					<view style="background-color: rgba(90, 221, 158, 1);" v-if ="getTaskStatus(item.startTime,item.endTime) === 2" class="status">
							进行中
					</view>
					<view style="background-color: #4876FF"  v-if ="getTaskStatus(item.startTime,item.endTime) === 3" class="status">
							已完成
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getAllActTask();

			//获取用户信息
			this.getUserInfo();
			
		},
		data() {
			return {
				list1: [
					{
						name: '全部',
					},
					{
						name: '已完成',
					},
					{
						name: '进行中'
					},
					{
						name: '带开始'
					},
				],

				//用户id
				id: 0,

				//用户信息
				userInfo: '',

				//活动列表标题
				title: '我的全部活动',

				//激活的活动数组
				actList: [],
			};
		},
		filters:{
			timeFilters(temp){
				temp = temp.substring(5,11).replace("-",".")
				return temp
			}
		},
		methods: {
			click(res){
				console.log(res)
				if(res.index === 0){
					this.getAllActTask()
				}
				if(res.index === 1){
					this.getCompletedTask()
				}
				if(res.index === 2){
					this.getInProgressTask()
				}
				if(res.index === 3){
					this.getToStartTask()
				}
			},
			
			// 判断任务状态
			getTaskStatus(startTime,endTime){
				let start = new Date(startTime).getTime()
				let end = new Date(endTime).getTime()
				let now = new Date().getTime()
				console.log("now",now)
				console.log("start",start)
				console.log("end",end)
				if(now<start){
					// 带开始
					return 1
				}
				if(now>start && now<end){
					// 进行中
					return 2
				}
				if( now>end){
					// 已完成
					return 3
				}
				
			},
			
			//获取用户
			getUserInfo() {
				this.userInfo = uni.getStorageSync("userInfo");
				console.log(this.userInfo)
			},



			async toActivityDetail(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/activityDetail/activityDetail?id=' + id,
				})
			},

			//获取全部活动
			getAllActTask() {
				
				this.id = uni.getStorageSync("user").id
				uni.request({
					url: `${this.$baseUrl}/tasks/${this.id}`,
					method: 'GET',
					success: res => {
						this.actList = res.data.data
						
						this.getTaskStatus(this.actList[0].startTime,this.actList[0].endTime)
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},

			//已完成活动
			getCompletedTask() {
			
				this.$request({
					url: `${this.$baseUrl}/tasks/completed/${this.id}`,
					method: 'GET',
				}).then(res => {
					this.actList = res.data.data
					
				}).catch(res => {
					console.log(res)
				})
			},

			//进行中活动
			getInProgressTask() {
			
				this.$request({
					url: `${this.$baseUrl}/tasks/inProgress/${this.id}`,
					method: 'GET',
				}).then(res => {
					this.actList = res.data.data
				}).catch(res => {
					console.log(res)
				})
			},

			//待开始活动
			getToStartTask() {
				this.$request({
					url: `${this.$baseUrl}/tasks/toStart/${this.id}`,
					method: 'GET',
				}).then(res => {
					this.actList = res.data.data
					console.log(this.actList)
				}).catch(res => {
					console.log(res)
				})
			},

		},
	}
</script>

<style lang="scss" scoped>


  .box {
	  background-color: #F5F5F5;
	  min-height: 1448rpx;
	  .box-bottom {
	  	margin-top: 32rpx;
	  	.title {
	  		margin-left: 20rpx;
	  	}
	  
	  	.active-box {
	  		padding: 20rpx;
	  		.active-box-item {
				position: relative;
				margin-bottom: 24rpx;
	  			display: flex;
	  			padding: 24rpx;
	  			max-height: 188rpx;
	  			background-color: #FFFFFF;
	  			border-radius: 16rpx;
	  			.status {
					position: absolute;
					width: 104rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					top:24rpx;
					right: 24rpx;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 1);
					background-color: rgba(153, 153, 153, 1);
					border-radius: 8rpx;
				}
	  			.img {
	  				width: 200rpx;
					height: 140rpx;
	  				border-radius: 8rpx;
	  			}
	  
	  			.content {
	  				margin-left: 16rpx;
	  
	  				.actTitle {
	  					font-size: 28rpx;
						color: rgba(51, 51, 51, 1);
	  				}
	  
	  				.time {
						margin-top: 8rpx;
	  					font-size: 24rpx;
	  					color: rgba(153, 153, 153, 1);
	  				}
	  
	  				.address {
						margin-top: 24rpx;
	  					font-size: 24rpx;
	  					color: rgba(102, 102, 102, 1);
	  				}
	  			}
	  		}
	  	}
	  }
	  
	  .detail-box {
	  	// float: right;
	  	font-size: 30rpx;
	  }
	  
	  .task-title {
	  	// float: right;
	  	font-size: 45rpx;
	  }
	  
	  // .task-userNum{
	  
	  // }
	  // .task-time{
	  
	  
	  .task-address {
	  	// font-size: 45rpx;
	  }
	  
	  .task-status {
	  	float: right;
	  	font-size: 30rpx;
	  	margin-right: 20rpx;
	  	border: 1px solid green;
	  	color: green;
	  	border-radius: 20rpx;
	  }
	  
	  .task-close {
	  	float: right;
	  	font-size: 30rpx;
	  	margin-right: 20rpx;
	  	border: 1px solid red;
	  	color: red;
	  	border-radius: 20rpx;
	  }
	  
	  .card {
	  	// background-color: blue;
	  	height: 220rpx;
	  	border: 1rpx solid #ddd;
	  	border-radius: 20rpx;
	  	margin: 40rpx 20rpx;
	  	background-color: ghostwhite;
	  	// padding: 20rpx 30rpx;
	  	display: flex;
	  
	  }
	  
	  .image-box {
	  	height: 100%;
	  	// background-color:blue;
	  	width: 30%;
	  	margin-right: 15rpx;
	  }
	  
	  .bgImage {
	  	height: 100%;
	  	width: 100%;
	  	border-radius: 10px;
	  }
	  
	  .detail-box {
	  	float: right;
	  	// background-color: red;
	  	height: 200rpx;
	  	width: 70%;
	  }
	  
	  .not-more {
	  	text-align: center;
	  	font-size: 30rpx;
	  }
  }
</style>
